<template>
  <div class="callback-container">
    <div class="spaceForm">
      <el-form
        :inline="true"
        label-width="60px"
        :model="queryForm"
      >
        <el-form-item>
          <el-select
            v-model="queryForm.group_id"
            :clearable="true"
            placeholder="分组"
          >
            <el-option
              v-for="item in group"
              :key="item.id"
              :label="item.group_name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="queryForm.community_id"
            :clearable="true"
            placeholder="小区"
          >
            <el-option
              v-for="item in community"
              :key="item.id"
              :label="item.community_name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="queryForm.room_status"
            :clearable="true"
            placeholder="房态"
          >
            <el-option
              v-for="item in dictList"
              :key="item.item_code"
              :label="item.item_name"
              :value="item.item_code"
            />
          </el-select>
        </el-form-item>
        <el-popover placement="bottom" trigger="click" width="220">
          <div class="statusTips">
            <p>空房：无入住人的房间</p>
            <p>逾期：有逾期未退房的房间</p>
            <p>维修：有报修的房间</p>
            <p>即将到期：即将到期的房间</p>
            <p>账单欠费：有账单到期未支付</p>
            <p>水电欠费：入住中水电欠费</p>
          </div>
          <i slot="reference" class="el-icon-warning-outline tips"></i>
        </el-popover>
        <el-form-item>
          <el-input
            v-model.trim="keyword"
            clearable
            placeholder="请输入房源号\姓名\手机号"
            @keyup.enter.native="setQuery"
            @clear="setQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="setQuery">
            查询
          </el-button>
        </el-form-item>
        <el-form-item>
          <div class="total">
            数量：
            <span>{{ rooms_total }}</span>
            间
          </div>
        </el-form-item>
      </el-form>
      <el-form>
        <el-button icon="el-icon-plus" type="primary" @click="handleRoom">
          添加整套
        </el-button>
      </el-form>
    </div>
    <room-build ref="roomBuild" @fetch-data="getNewList" />
    <room-list ref="roomList" :query="queryForm" @getTotal="setTotal" />
  </div>
</template>

<script>
  import { getgroup } from '@/api/group'
  import { getCommunityList } from '@/api/community'
  import { getDictByCode } from '@/utils/dict'
  import roomBuild from '@/views/components/components/roomBuild'
  import roomList from '@/views/components/roomList'
  export default {
    name: 'House',
    components: { roomBuild, roomList },
    data() {
      return {
        group: [],
        community: [],
        dictList: [],
        rooms_total: 0,
        keyword: '',
        queryForm: {
          keyword: '',
          room_type: '1',
          building_id: '0',
          room_status: '',
          floor_id: '',
        },
      }
    },
    created() {
      this.getGroup()
      this.getCommunity()
      this.getDict()
    },
    methods: {
      setTotal(num) {
        this.rooms_total = num
      },
      setQuery() {
        this.queryForm.keyword = this.keyword
      },
      getNewList() {
        this.$refs['roomList'].newList()
      },
      handleRoom() {
        this.$refs['roomBuild'].showEdit()
      },
      async getGroup() {
        const { data } = await getgroup({})
        this.group = data
      },
      async getCommunity() {
        const { data } = await getCommunityList({})
        this.community = data
      },
      async getDict() {
        this.dictList = await getDictByCode('room_status')
      },
    },
  }
</script>
<style lang="scss" scoped>
  .spaceForm {
    .el-select {
      width: 130px;
    }
  }
  .total {
    font-size: 14px;
    span {
      font-size: 20px;
      font-style: italic;
    }
  }
  .statusTips {
    p {
      line-height: 1.6;
      margin: 0;
    }
  }
  .tips {
    width: 32px;
    height: 32px;
    line-height: 32px;
    cursor: pointer;
    &:hover {
      color: #1890ff;
    }
  }
</style>
